<template>
  <el-dialog title="订单详情" :visible.sync="dialogVisible">
    <el-form ref="myform" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="广告位名称" prop="name">
        <el-input v-model="form.name" style="width: 244px"></el-input>
      </el-form-item>
      <el-form-item label="广告位位置" prop="position">
        <el-select v-model="form.position" placeholder="位置" clearable>
          <el-option label="banner" value="0"></el-option>
          <el-option label="充值" value="1"></el-option>
          <!-- <el-option label="下" value="2"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="图片" prop="imageUrl">
        <el-upload
          class="avatar-uploader"
          :action="url"
          :show-file-list="false"
          :on-success="upSuccess"
          :headers="{ token: token }"
        >
          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-input v-model="form.imageUrl" style="display: none"></el-input>
      </el-form-item>
      <el-form-item label="是否展示" prop="status">
        <el-switch
          :active-value="'0'"
          :inactive-value="'1'"
          v-model="form.status"
        ></el-switch>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input
          type="textarea"
          style="width: 244px"
          v-model="form.sort"
        ></el-input>
      </el-form-item>

      <el-form-item label="链接地址">
        <el-input
          type="textarea"
          style="width: 244px"
          v-model="form.linkUrl"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { uploadFile } from "@/config/interface";
import { bannerSave } from '@/config/api'
export default {
  data () {
    return {
      dialogVisible: false,
      url: "",
      token: "",
      imageList: [],
      form: {
        name: "",
        position: "",
        imageUrl: "",
        sort: "",
        linkUrl: "",
        status: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入广告位名称', trigger: 'blur' }],
        position: [
          { required: true, message: '请选择广告位位置', trigger: 'change' }],
        imageUrl: [
          { required: true, message: '请选择广告位图片', trigger: 'blur' }],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }],
        linkUrl: [
          { required: true, message: '请输入链接url', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择是否展示', trigger: 'change' }],
      }

    };
  },
  methods: {
    addShow () {
      this.url = uploadFile()
      this.token = this.$store.state.login.token;
      this.resetFields()

      this.dialogVisible = true

    },
    editShow (record) {
      this.url = uploadFile()
      this.token = this.$store.state.login.token;
      this.resetFields()
      this.form = {
        name: record.name,
        position: record.position,
        imageUrl: record.imageUrl,
        sort: record.sort,
        linkUrl: record.linkUrl,
        status: record.status,
        id: record.id
      }
      this.dialogVisible = true
    },
    resetFields () {
      this.form = {
        name: "",
        position: "",
        imageUrl: "",
        sort: "",
        linkUrl: "",
        status: ""
      }


    },
    upSuccess (file) {
      this.form.imageUrl = file.result
    },
    cancle () {
      this.$refs.myform.resetFields()
      this.dialogVisible = false
    },
    submit () {
      this.$refs['myform'].validate((valid) => {
        if (valid) {
          bannerSave(this.form).then(res => {
            this.dialogVisible = false
            this.$parent.getData()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>